import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { Button, Form, Input,Toast } from 'antd-mobile'
import './Login.less'
import Logo from '../../assets/img/logo.png'
import {reqlogin} from '../../request/api'
export default class Login extends Component {
  constructor(){
    super()
    this.state={
      user:{
        phone:'',
        password:''
      }
    }
  }
  change(e,key){
    this.setState({
      user:{
        ...this.state.user,
        [key]:e
      }
    })
  }
  login=()=>{
    reqlogin(this.state.user).then(d=>{
      if(d.data.code==200){
        Toast.show({
          content:d.data.msg
        })
        //将登录的用户信息存储到本地
        sessionStorage.setItem('isLogin',JSON.stringify(d.data.list))
        //跳转到首页
        this.props.history.push('/index/home')
      }
    })
  }
  render() {
    let {user}=this.state
    return (
      <div className='login'>
        <Header title={'手机登录'} register></Header>
        <div className='form'>
        <img src={Logo} alt="" />
        <Form layout='horizontal'>
        
          <Form.Item label='用户名' name='username'>
            <Input placeholder='请输入用户名' clearable onChange={(e)=>{this.change(e,"phone")}} />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(e)=>{this.change(e,"password")}} />
          </Form.Item>
        </Form>
        <div>
          <Button block color='success' size='middle' onClick={this.login} >
            登录
          </Button>
        </div>
        </div>
      </div>
    )
  }
}
